<template>
	<view class="detail">
		<view class="info">
			<image class="cover" v-if="playingIndex === -1" :src="detail.cover"></image>
			<video @play="onVideoPlay" @ended="onVideoEnd" autoplay loop class="cover" v-else :src="videoPath"></video>
			<view class="title">{{ detail.name }}</view>
			<view class="tag">
				<text>{{ detail.level | codeFilter('STU_LEVEL') }}</text>
				 <text style="margin: 0 4rpx;"> / </text>
				<text class="other">{{ detail.category | codeFilter('STU_CATEGORY') }}</text>
			</view>
			<view class="see">
				<view class="isfree">{{detail.free?'免费':'付费'}}</view>
				总共<text>{{ detail.videoNum }}</text>节
			</view>
		</view>

		<view v-if="!loading" class="content">
			<me-tabs v-model="tabIndex" :tabs="tabs"></me-tabs>

			<view v-if="tabIndex === 0">
				<view :key="index" @click="playVideo(item, index)" v-for="(item, index) in detail.stuCurriculumVideos"
					class="list">
					<view class="list-left">
						<!-- <image src="https://pic.616pic.com/ys_img/00/10/14/SPr1HONpuW.jpg"></image> -->
						<uni-icons type="videocam" size="20"></uni-icons>
						[{{ playingIndex === index ? '观看中' : '点击观看' }}]: {{ item.name }}
					</view>
					<view class="list-right">{{ item.totalTime | formatSeconds }}</view>
				</view>
			</view>
			<view class="curriculumDesc" v-if="tabIndex === 1">{{ detail.curriculumDesc }}</view>
		</view>
		<Loading v-if="loading"></Loading>
	</view>
</template>

<script>
	import {
		curriculumById,
		endVideo,
		startVideo
	} from '@/services/curriculum.js';
	import MescrollItem from '@/components/course/CourseItem.vue';
	import MeTabs from '@/components/me-tabs/me-tabs.vue';

	export default {
		components: {
			MeTabs
		},
		data() {
			return {
				videoPath: '',
				playingIndex: -1,
				loading: false,
				detail: {},
				tabs: [{
					name: '课表'
				}, {
					name: '介绍'
				}],
				tabIndex: 0
			};
		},
		onLoad({
			id
		}) {
			this.id = id;
			this.getDetail();
		},
		methods: {
			async getDetail() {
				this.loading = true;
				this.detail = await curriculumById({
					curriculumId: this.id
				});
				if (this.detail.stuCurriculumVideos.length) {
					this.playVideo(this.detail.stuCurriculumVideos[0], 0)
				}
				this.loading = false;
			},
			playVideo(item, index) {
				this.videoPath = item.videoPath;
				this.playingIndex = index;
			},
			onVideoEnd() {
				endVideo({
					curriculumVideoId: this.detail.stuCurriculumVideos[this.playingIndex].curriculumId
				});
			},
			onVideoPlay() {
				startVideo({
					curriculumVideoId: this.detail.stuCurriculumVideos[this.playingIndex].curriculumId
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.detail {
		background-color: #f8f8f8;
		min-height: 100vh;

		.info {
			background-color: #fff;

			.cover {
				width: 750rpx;
				height: 500rpx;
			}

			.isfree {
				width: 80rpx;
				background-color: indianred;
				border-radius: 10rpx;
				display: flex;
				padding: 8rpx 0rpx;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;
				margin-right: 20rpx;
				// margin-bottom: 10rpx;
				color: #fff;
				// border: 1rpx solid #81a4e4;
			}

			.title {
				padding: 20rpx 30rpx;
				font-weight: bold;
				font-size: 36rpx;
			}

			.tag {
				display: flex;

				text {
					// background-color: #81a4e4;
					// border-radius: 10rpx;
					// display: flex;
					// padding: 8rpx 20rpx;
					// justify-content: center;
					// align-items: center;
					// margin-right: 20rpx;
					// color: #fff;
					// border: 1rpx solid #81a4e4;
					color: #515151;
					font-size: 28rpx;
				}

				.other {
					// background-color: #fff;
				}

				padding: 10rpx 30rpx 10rpx;
			}

			.see {
				padding: 20rpx;
				font-size: 28rpx;
				color: #717070;
				display: flex;
				align-items: center;

				text {
					// padding-bottom: 6rpx;
					color: #515151;
					// margin-left: 10rpx;
				}
			}
		}

		.content {
			margin-top: 10rpx;
			background-color: #fff;
			padding-bottom: 60rpx;
		}

		.list {
			display: flex;
			background-color: #ececec;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			border-radius: 10rpx;
			margin: 30rpx 30rpx 0;
			height: 110rpx;

			image {
				height: 32rpx;
				width: 32rpx;
				margin-right: 20rpx;
			}

			.list-left {
				font-size: 30rpx;
				line-height: 1;
				display: flex;
				align-items: center;
			}

			.list-right {
				width: 120rpx;
				color: #8a8a8a;
				font-size: 26rpx;
			}
		}

		.curriculumDesc {
			background-color: #fff;
			padding-bottom: 400rpx;
			padding: 30rpx;
		}
	}
</style>
